<!doctype html>
<html lang="zh-CN">

<head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>使用帮助</title>
    <!-- Bootstrap 的 CSS 文件 -->
    <link rel="stylesheet" href="./bootstrap-4.6.1-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/cowcat.css">
    <script src="./js/jquery-3.2.1.min.js"></script>
    <script src="./bootstrap-4.6.1-dist/js/bootstrap.min.js"></script>
    <script src="./bootstrap-4.6.1-dist/js/bootstrap.bundle.min.js"></script>
    <script src="./js/vue.global.js"></script>
    <script src="./js/jquery.form.min.js"></script>

    <style>
        h3{
            text-align: center;
            margin-top: 2rem;
            color: #333;
        }
        .questionContainer{
            display: flex;
            flex-direction: column;
            border-radius: 0.5rem;
            background: #B8DAFF;
            margin-left: 6.0185vw;
            margin-right: 6.0185vw;
            padding: 1rem 1rem 0 1rem;
            margin-top: 1rem;
        }
        .mainView{
            background: #FAFAFA;
        }
        .questionItemDiv{
            display: flex;
            flex-direction: column;
            margin-bottom: 1rem;
        }
        .questionLine{
            display: flex;
            flex-direction: row;
            align-items: flex-start;
        }
        img{
            width: 2rem;
            height: 2rem;
        }
        .questionSpan{
            color: #666;
            margin-left: 0.5rem;
            font-size: 1.1rem;
        }
        .answerSpan{
            color: #999;
            margin-left: 0.5rem;
        }
        
    </style>

</head>

<body>
    <div class="mainView">
        <h3>常见问题</h3>  

        <div class="questionContainer">
            <div class="questionItemDiv">
                <div class="questionLine">
                    <img src="./images/icons8_speech_bubble_with_dots_1.png"/>
                    <span class="questionSpan">其他设备如何访问此服务器上的资源？</span>
                </div>
                <div class="questionLine">
                    <img src="./images/icons8_speech_bubble_with_dots_2.png"/>
                    <span class="answerSpan">其他设备（手机、平板、电脑等）需要和此设备连接至同一网络，然后在浏览器地址栏中输入顶部标题栏的URL地址即可访问到本台设备上的资源。</span>
                </div>
            </div>

            <div class="questionItemDiv">
                <div class="questionLine">
                    <img src="./images/icons8_speech_bubble_with_dots_1.png"/>
                    <span class="questionSpan">本应用是否收费？</span>
                </div>
                <div class="questionLine">
                    <img src="./images/icons8_speech_bubble_with_dots_2.png"/>
                    <span class="answerSpan">本应用为开源软件，不收取您的任何费用。</span>
                </div>
            </div>

            <div class="questionItemDiv">
                <div class="questionLine">
                    <img src="./images/icons8_speech_bubble_with_dots_1.png"/>
                    <span class="questionSpan">为什么本程序需要您同意允许访问所有文件权限？</span>
                </div>
                <div class="questionLine">
                    <img src="./images/icons8_speech_bubble_with_dots_2.png"/>
                    <span class="answerSpan">对于安卓11以上的版本，Google爷爷对读写外部存储空间的文件又作出了进一步的限制。为了能够正常读写外部存储空间的文件，需要您手动授予Cowcat所有文件访问权限，否则将无法正常使用本程序的文件上传、下载等功能。</span>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    const vueApp = {
        data() {
            return {

            }
        },
        methods: {
           
        }
    }

    Vue.createApp(vueApp).mount(".mainView")
</script>

</html>